<script setup>
import router from '@/router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useUserInfoStore } from '@/stores/userInfo';
import { useTokenStore } from '@/stores/token.js'
const userInfoStore = useUserInfoStore()
const tokenStore = useTokenStore()
const handleCommand = (command) => {
  if (command === 'logout') {
    // 退出登录
    ElMessageBox.confirm(
      '你确定要退出登录吗？',
      '温馨提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
      .then(() => {
        tokenStore.removeToken()
        userInfoStore.removeInfo()

        router.push('/login')
        ElMessage.success('退出登录成功')
      })
      .catch(() => {
        ElMessage.info('你已取消退出登录')
      })
  } else {
    router.push('/user/' + command)
  }
}

const handleFull = () => {
  // 如果不是全屏状态
  if (!document.fullscreenElement) { 
    document.documentElement.requestFullscreen();
  } else { 
    // 如果已经是全屏状态
      document.exitFullscreen();
  }
}


</script>

<template>
  <div>
    <el-container>
      <el-container>

        <el-header
          style="height: 60px; line-height: 60px; display: flex; align-items: center; box-shadow: 2px 0 6px rgba(0, 21, 41, .35);">
          <!--后续改成获取当前用户名字打印在这-->
          <div class="welcome-text">欢迎：{{ userInfoStore.info.name }}</div>

          <!--和开发者交流下拉框-->
          <div style="flex: 5; display: flex; justify-content: flex-end; align-items: center">
            <el-dropdown>
              <span class="el-dropdown-link">和开发者交流</span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>
                    <img src="@/assets/writer.jpg" style="width: 520px;">
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>

          <div style="flex: 1; display: flex; justify-content: flex-end; align-items: center">
            <!--全屏按钮-->
            <!-- <i class="dn-icon-quanping:before" style="font-size: 25px"></i> -->
            <link rel="stylesheet" href="@/assets/css/iconfont/iconfont.css">
            <span class="iconfont dn-icon-quanping" @click="handleFull"></span>


            <!--个人信息等功能下拉框-->
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                <img src="@/assets/test.jpg" alt="" style="width: 40px; height: 40px; margin: 0 10px">
                <span>ECUTer</span>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="info">个人信息</el-dropdown-item>
                  <el-dropdown-item command="updatePassword">修改密码</el-dropdown-item>
                  <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>

        <!-- 主体区域 -->
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>

  </div>

</template>

<style scoped>
/*下拉框*/
.el-dropdown-link {
  cursor: pointer;
  color: black;
  display: flex;
  align-items: center;
  user-select: none;
  outline: none;
}

.el-dropdown-link:hover{
  color:rgb(12, 162, 208)
}

.welcome-text {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  user-select: none;
}

/*左侧卡片作为状态栏*/
/*.card {
  margin-top: 3vh;
  width: 5%;
  height: 80vh;
  shadow: always;
}*/
</style>
